<template>
	<eui-page-frame topHeight="440">
		<template #top>
			<view class="content-img" :style="[bgimage]">
				<eui-nav-bar />
			</view>
			<view class="topbg"  :style="[topBg]">
				<view class="top-box">
					<text class="top-box__text-title">申请核验</text>
					<text class="top-box__text-content">扫描商户出示的二维码，进行核验。</text>
				</view>
				<view class="circle-container" :class="[theme]" @click="scanClick">
					<eui-icons size="26" type="scan"></eui-icons>
				</view>
			</view>
			<view style="margin-top: 18rpx; background: #FFFFFF;border-radius: 30rpx 30rpx 0 0; opacity: 0.8;">
				<eui-tab :tabs="tabData" :spaceLeft="spaceLeft" :value="tabIndex" @change="tabChange"></eui-tab>
			</view>
		</template>
		<eui-page-content>
			<eui-base-card v-for="(item, index) in dataList" :key="index" @click="openDetail(item)"
				:title="item.project">
				<template #left>
					<view class="e-attachment">
						<image class="e-attachment__image" :src="item.cover" mode="aspectFill" />
					</view>
				</template>
				<template #right>
					<eui-tag :text="item.status" plain plainFill :type="'待评价,已完成'.includes(item.status)?'success':(item.status=='已驳回'?'warning':undefined)" :showBorder="false"> </eui-tag>
				</template>
				<eui-detail-show :items="dataItems" v-model="dataList[index]" size="small"></eui-detail-show>
			</eui-base-card>

			<eui-base-card v-if="dataList.length == 0">
				<view class="nodata">
					<image src="@/static/img/no_data.png" mode="aspectFit" class="nodata-image" />
				</view>
			</eui-base-card>
		</eui-page-content>
	</eui-page-frame>
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
import useService from '@/hooks/useService';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/themeStore';
const themeStore = useThemeStore(); // 主题
const { theme } = storeToRefs(themeStore);
const bgimage =theme._object.theme=='theme-blue'?"background-image: url(../../../static/img/rdsImgs/top_ywsq_blue.png);":'background-image: url(../../../static/img/rdsImgs/top_ywsq_orange.jpg);'
const topBg = theme._object.theme=='theme-blue'?'background: url(../../../static/img/rdsImgs/zsqt_augment_bg_blue.png);':'background: url(../../../static/img/rdsImgs/zsqt_augment_bg_orange.png);'
const service = useService({ prefix: "apiApi" });

const sanCode=ref('');

const whereList = ref([
	{ c_col: "c_bill_type", c_oper: "左相似", c_value: 'DK', c_logic: "而且" }
])

const dataItems = [
	{
		label: "申请人",
		prop: "user",
		type: "text",
		element: {
		},
	},
	{
		label: "申请日期",
		prop: "date",
		type: "text",
		element: {
			mode: 'YYYY-MM-DD'
		},
	},
	{
		label: "申请内容",
		prop: "content",
		type: "text",
		element: {
		},
	},
]

const tabData = ref([{ name: '全部' }, { name: '正在申请' }, { name: '已处理' }, { name: '已驳回' }]);

const tabIndex = ref(0);
const spaceLeft = ref(6);

const dataList = ref([
	// { project: '', user: '', date: '', content: '', status: '', cover: '../../../static/img/homeImgs/notfound.png' },
]);

const scanClick = () => {
	uni.scanCode({
        success: async function (res) {
			console.log('scanCoderes',res);
            if (res.result != '' && res.result != undefined && res.result != null) {
                sanCode.value = res.result;
				console.log('scanCode',sanCode.value);
				if(sanCode.value){
					uni.showLoading({ title: "查询中...", mask: true });
					const res = await service.request('管易通物业模块服务','PropertyApplyScanCodeCheck', sanCode.value);
					console.log('scanCoderequest',res);
					uni.hideLoading();
					if (res) {
						uni.navigateTo({
							url: `./detail?id=${sanCode.value}&project=申请核验`
						});
					}
					else{
						uni.showModal({
							title: '提示',
							content: '二维码校验未通过，请检查二维码是否出示正确',
							showCancel: false,
						});
					}	
				}
            }
        },
    });
}

const tabChange = (e) => {
	tabIndex.value = e;
	const value = e === 1 ? '0,1' : (e === 2 ? '3,4' : (e === 3 ? '9' : ''));
	if (value) {
		whereList.value = [
			{ c_col: "c_bill_type", c_oper: "左相似", c_value: 'DK', c_logic: "而且" },
			{ c_col: "c_work_status", c_oper: "包含", c_value: value, c_logic: "而且" },
		]
	}
	else {
		whereList.value = [
			{ c_col: "c_bill_type", c_oper: "左相似", c_value: 'DK', c_logic: "而且" },
		]
	}
	getApplyData();
}

onShow(() => {
	getApplyData();
})

//获取申请数据
const getApplyData = async () => {
	const req = {
		WhereList: whereList.value
	}
	uni.showLoading({ title: "查询中...", mask: true });
	const res = await service.request('管易通物业模块服务', 'EnjoyQueryList', req);
	uni.hideLoading();
	dataList.value = [];
	if (res && res.ReturnObject) {
		const objectData = res.ReturnObject;
		if (objectData.length > 0) {
			dataList.value = objectData.map(x => {
				return {
					c_work_id: x.c_work_id,
					project: x.c_property_type_name,
					user: x.c_req_user,
					date: x.c_req_dt,
					content: x.c_question,
					status: x.c_work_status_name,
					cover: !x.c_brand_logo? '../../../static/img/no_image.png': service.getBaseUrl() + '/File/DownLoadFile/' + x.c_brand_logo,
				}
			});
		}
	}
}
const openDetail = (e) => {
	uni.navigateTo({
		url: `./detail?id=${e.c_work_id}&project=${encodeURIComponent(e.project)}`
	});
}

</script>

<style lang="scss">
.content-img {
	background-image: url(../../../static/img/rdsImgs/top_ywsq_blue.png);
	background-size: 100% 420rpx;
	background-repeat: no-repeat;
	width: 100%;
	height: 420rpx;
}

.topbg {
	background: url(../../../static/img/rdsImgs/zsqt_augment_bg_blue.png);
	display: flex;
	flex-direction: row;
	border-radius: 20rpx;
	margin: 20rpx 20rpx 0px 20rpx;
	padding: 18rpx 28rpx;
	justify-content: space-between;
	justify-items: center;
	margin-top: -70rpx;
	align-items: center;
}

.top-box {
	display: flex;
	justify-content: flex-start;
	flex-flow: column;

	&__text—title {
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 30rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: center;
		white-space: nowrap;
		line-height: 42rpx;
		margin-right: 220rpx;
	}

	&__text-content {
		overflow-wrap: break-word;
		color: rgba(136, 136, 136, 1);
		font-size: 20rpx;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 28rpx;
		margin-top: 8rpx;
	}
}

.circle-container {
	width: 60rpx;
	height: 60rpx;
	position: relative;
	border-radius: 50%;
    // background: var(--theme-bgc-color);  //linear-gradient(135deg, #02B7E6 0%, #36A9F3 100%)
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	align-content: space-around;
}

.card {
	border-radius: 16rpx;
	//margin: 0px 10px 10px 10px;
	background-color: #ffffff;
}

.nodata {
	width: 100%;
	height: 560rpx;

	image {
		width: 100%;
		height: 80%;
		opacity: 0.4;
	}
}

.e-attachment {
		align-items: center;
		justify-content: center;
		display: flex;

		&__image {
			width: 208rpx;
			height: 208rpx;
			// margin: 6rpx 6rpx;
			border-radius: 10rpx;
		}
}

</style>